<template>
    <fieldset>
        <legend>响应式语法:ref</legend>
        <h1>{{ counter }}</h1>
        <input type="text" ref="ipt">
        <child ref="childCom" />
        <ul>
            <li v-for="item in arr" :key="item" :ref="refFn">{{ item }}</li>
        </ul>
    </fieldset>
</template>
<script setup>
import { ref, onMounted, onBeforeUpdate,watchEffect } from "vue"
//setup语法糖 等同于在选项中使用了setup
//可以直接使用await
// let res =  await Promise.resolve('123')
// console.log(res)
//展示一个子组件
import child from "./child.vue"
//响应式语法:ref

//1.直接作为响应式语法来使用
//ref会使用对象,对属性进行包裹,所有的属性都会存在ref的value属性中
let counter = ref(10)
//ref属性给模板使用的时候,会自动'解包',setup内部使用的时候,不要忘记.value
setTimeout(() => {
    console.log(counter)
    counter.value = 20
}, 2000);

//2.作为模板引用来使用(引用dom元素,引用子组件)
let ipt = ref()
//作用在子组件
let childCom = ref();
//dom挂载之后执行的钩子函数 只能调用一次
onMounted(() => {
    ipt.value.focus()
    console.log(childCom.value)
})

//3.ref在v-for里面的使用

let arr = ref(['吃', '写代码', '改bug']);

let lis = ref([])
// 在虚拟Dom更新之前,清空数组,避免添加重复的元素
onBeforeUpdate(()=>{
    lis.value = []
})

let refFn = (el) => {
    console.log(el)
    lis.value.push(el)
}

console.log(lis.value)

//watchEffect在dom更新之后,执行副作用(dom操作就是属于副作用)
//操作dom 异步请求 ...副作用

watchEffect(()=>{
    console.log('----effetc',ipt.value)
},{
    //dom更新之后回调effect中的函数
    flush:'post'
})

</script>